<template>
  <div>
    <div class="i-layout-page-header">
      <div class="i-layout-page-header">
        <Button icon="ios-arrow-back" size="small" @click="back" class="mr20" v-if="$route.meta.auth[0] === 'system-config-system_config-list'">返回</Button>
        <span class="ivu-page-header-title mr20" v-text="$route.meta.title"></span>
      </div>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Row class="ivu-mt box-wrapper">
        <Col :xs="24" :sm="24" :md="6" :lg="4" class="left-wrapper" v-if="!$route.params.id && groupAll.length">
        <Menu :theme="theme3" :active-name="sortName" width="auto">
          <MenuGroup>
            <MenuItem :name="item.id" class="menu-item" v-for="(item,index) in groupAll" :key="index" @click.native="bindMenuItem(item,index)">
            {{item.name}}
            </MenuItem>
          </MenuGroup>
        </Menu>
        </Col>
        <Col :xs="24" :sm="24" :md="$route.params.id?24:17" :lg="$route.params.id?24:20" ref="rightBox">
        <Card :bordered="false" dis-hover>
          <Form ref="formValidate" :model="formValidate" :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
            <Row type="flex" :gutter="24">
              <Col v-bind="grid">
              <FormItem label="是否显示：">
                <Select v-model="formValidate.status" placeholder="请选择" clearable @on-change="userSearchs">
                  <Option value="1">显示</Option>
                  <Option value="0">不显示</Option>
                </Select>
              </FormItem>
              </Col>
            </Row>
            <Row type="flex">
              <Col v-bind="grid">
              <Button type="primary" icon="md-add" @click="groupAdd('添加数据')" class="mr20">添加数据</Button>
              </Col>
            </Row>
          </Form>
          <Table :columns="columns1" :data="tabList" ref="table" class="mt25" :loading="loading" highlight-row no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
            <template slot-scope="{ row, index }" slot="status">
              <i-switch v-model="row.status" :value="row.status" :true-value="1" :false-value="0" @on-change="onchangeIsShow(row)" size="large">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
              </i-switch>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <a @click="edit(row, '编辑')">编辑</a>
              <Divider type="vertical" />
              <a @click="del(row,'删除这条信息',index)">删除</a>
            </template>
          </Table>
          <div class="acea-row row-right page">
            <Page :total="total" :current="formValidate.page" show-elevator show-total @on-change="pageChange" :page-size="formValidate.limit" />
          </div>
        </Card>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import editFrom from '@/components/from/from'
import { groupDataListApi, groupDataAddApi, groupDataEditApi, groupDataHeaderApi, groupDataSetApi, groupAllApi } from '@/api/system'
export default {
  name: 'list',
  components: { editFrom },
  data() {
    return {
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24
      },
      formValidate: {
        status: '',
        page: 1,
        limit: 20,
        gid: 0
      },
      total: 0,
      tabList: [],
      columns1: [],
      FromData: null,
      loading: false,
      titleType: 'group',
      groupAll: [],
      theme3: 'light',
      labelSort: [],
      sortName: null,
      current: 0
    }
  },
  computed: {
    ...mapState('media', [
      'isMobile'
    ]),
    labelWidth() {
      return this.isMobile ? undefined : 75
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right'
    }
  },
  watch: {
    $route(to, from) {
      if(this.$route.params.id) {
        this.getList();
        this.getListHeader()
      } else {
        this.getGroupAll();
      }
    }
  },
  mounted() {
    if(this.$route.params.id) {
      this.getList();
      this.getListHeader()
    } else {
      this.getGroupAll();
    }
  },
  methods: {
    bindMenuItem(name, index) {
      this.current = index;
      this.formValidate.gid = name.id
      this.getListHeader();
      this.getList();
    },
    getGroupAll() {
      groupAllApi().then(async res => {
        this.groupAll = res.data;
        this.sortName = res.data[0].id
        this.formValidate.gid = res.data[0].id
        this.getListHeader()
        this.getList()
      }).catch(res => {
        this.$Message.error(res.msg)
      })
    },
    // 返回
    back() {
      this.$router.push({ path: '/admin/system/config/system_group/index' })
    },
    getUrl(type) {
      let url = 'setting/group_data' + type;
      if(this.$route.params.id) {
        let arr = {
          'setting_groupDataSign': "setting/sign_data" + type,
          'setting_groupDataOrder': "setting/order_data" + type,
          'setting_groupDataUser': "setting/usermenu_data" + type,
          'setting_groupDataPoster': "setting/poster_data" + type,
          'marketing_storeSeckillData': "setting/seckill_data" + type,
        };
        if(arr[this.$route.name] === undefined) return url
        return arr[this.$route.name]
      } else {
        return url
      }
    },
    // 列表
    getList() {
      this.loading = true
      this.formValidate.gid = this.$route.params.id ? this.$route.params.id : this.formValidate.gid
      this.formValidate.status = this.formValidate.status || ''
      console.log(this.getUrl())
      groupDataListApi(this.formValidate, this.getUrl('')).then(async res => {
        let data = res.data
        this.tabList = data.list
        this.total = data.count
        this.loading = false
      }).catch(res => {
        console.log(res)
        this.loading = false
        this.$Message.error(res.msg)
      })
    },
    // 表格头部
    getListHeader() {
      this.loading = true
      let data = {
        gid: this.$route.params.id ? this.$route.params.id : this.formValidate.gid
      }
      groupDataHeaderApi(data, this.getUrl('/header')).then(async res => {
        let data = res.data
        let header = data.header
        let index = []
        header.forEach(function(item, i) {
          if(item.type === 'img') {
            index.push(i)
          }
        })
        index.forEach(function(item) {
          header[item].render = (h, params) => {
            let arr = params.row[header[item].key]
            let newArr = []
            if(arr !== undefined && arr.length) {
              arr.forEach(function(e, i) {
                newArr.push(h('div', {
                  style: {
                    width: '36px',
                    height: '36px',
                    'border-radius': '4px',
                    cursor: 'pointer',
                    display: 'inline-block'
                  }
                }, [
                  h('img', {
                    attrs: {
                      src: params.row[header[item].key][i]
                    },
                    style: {
                      width: '100%',
                      height: '100%'
                    }
                  })
                ]))
              })
            }
            return h('viewer', newArr)
          }
        })
        this.columns1 = header
        this.loading = false
      }).catch(res => {
        this.loading = false
        this.$Message.error(res.msg)
      })
    },
    pageChange(index) {
      this.formValidate.page = index
      this.getList()
    },
    // 表格搜索
    userSearchs() {
      this.formValidate.page = 1
      this.getList()
    },
    // 添加表单
    groupAdd() {
      this.$modalForm(groupDataAddApi({ gid: this.$route.params.id ? this.$route.params.id : this.formValidate.gid }, this.getUrl('/create'))).then(() => this.getList())
    },
    // 修改是否显示
    onchangeIsShow(row) {
      groupDataSetApi(this.getUrl(`/set_status/${row.id}/${row.status}`)).then(async res => {
        this.$Message.success(res.msg)
        this.getList()
      }).catch(res => {
        this.$Message.error(res.msg)
      })
    },
    // 编辑
    edit(row) {
      let data = {
        gid: row.gid
      }
      this.$modalForm(groupDataEditApi(data, this.getUrl(`/${row.id}/edit`))).then(() => this.getList())
    },
    // 删除
    del(row, tit, num) {
      let delfromData = {
        title: tit,
        num: num,
        url: this.getUrl(`/${row.id}`),
        method: 'DELETE',
        ids: ''
      }
      this.$modalSure(delfromData).then((res) => {
        this.$Message.success(res.msg)
        this.tabList.splice(num, 1)
      }).catch(res => {
        this.$Message.error(res.msg)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
/deep/ .ivu-menu-vertical .ivu-menu-item-group-title {
  display: none;
}

/deep/ .ivu-menu-vertical.ivu-menu-light:after {
  display: none;
}

.left-wrapper {
  height: 904px;
  background: #fff;
  border-right: 1px solid #dcdee2;
}

.menu-item {
  z-index: 50;
  position: relative;
  display: flex;
  justify-content: space-between;
  word-break: break-all;

  .icon-box {
    z-index: 3;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
  }

  &:hover .icon-box {
    display: block;
  }

  .right-menu {
    z-index: 10;
    position: absolute;
    right: -106px;
    top: -11px;
    width: auto;
    min-width: 121px;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
